<template>
  <span>
    <img
      class="page-icon"
      v-if="sex == '男'"
      src="@/assets/icon/xb_nan.svg"
      :style="{ width: size + 'px', height: size + 'px' }"
    />
    <img
      class="page-icon"
      v-else-if="sex == '女'"
      src="@/assets/icon/xb_nv.svg"
      :style="{ width: size + 'px', height: size + 'px' }"
    />
    <img
      v-else
      class="page-icon"
      src="@/assets/icon/xb.svg"
      :style="{ width: size + 'px', height: size + 'px' }"
    />
  </span>
</template>

<script setup lang="ts">

let props = withDefaults(defineProps<{
  /**
   * 性别
   */
  sex?: string;

  /**
  * 大小
   */
  size?: number
}>(), {
  size: 20
})

</script>

<style lang="less" scoped>
.page-icon {
  vertical-align: middle;
}
</style>